<template>
  <div> <!-- 新书推荐 -->
             <div class="booksite">
                <div class="title">
                    <h3><span></span>新书推荐</h3>
                    <a>换一换</a>
                </div>
                <div class="newsbook">
                    <div  v-for="(list,i) in book_new" :key="i" >
                 <router-link to="">
                   <img :src="list.imgs">
                       <p>{{list.name}}</p>
                 </router-link>
                       </div>
                </div>
            </div>
            </div>
</template>

<script>
import $axios from 'axios'
export default {
  data () {
    return {
      book_new: []
    }
  },
  mounted () {
    this.getNew()
  },
  methods: {
    msg (path) {
      this.$router.replay(path)
    },
    getNew () {
      var url = './static/json/book_new.json'
      $axios.get(url).then(res => {
        this.book_new = res.data
        console.log(res.data)
      })
    }
  }
}
</script>
<style scoped>
/* 新书推荐 */
a{
    text-decoration: none;
    color: black;
}
.booksite{
    margin: 10px auto;
    border: 1px  rgba(119, 119, 119, 0.1) solid;
}

.title{
    margin: 0 auto;
    height: 35px;
    padding:5px 0 0 2%;
    border-bottom: 1px  rgba(119, 119, 119, 0.1) solid;
    margin-bottom: 5px;
}
.title span{
    border: 2px solid #1296db;
    height: 35px;
    margin-right: 10px
}
.title a{
    position: absolute;
    margin-top: -6%;
    left: 80%;
    font-size: 14px;
    color: rgb(158, 157, 157)
}
.newsbook{
    height: 290px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.newsbook div{
    width: 20%;
    height: 38%;
    border: 1px  rgba(204, 204, 204, 0.1) solid;
    text-align: center;
    font-size: 14px;
    color: rgb(88, 88, 88)
}
.newsbook img{
    width: 100%;
    height: 100%;
}
</style>
